<template>
  <div class="map-container">
    <div ref="chart" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import jiangxiMap from "../assets/china.json";

export default {
  name: "MapChina",
  data() {
    return {
      myChart: null,
      cityData: [],
    };
  },
  async mounted() {
    this.cityData = [
      // 江西省各个市区的经纬度数据
      { value: [115.8585, 28.6765] },
      { value: [115.9728, 29.7416] },
      { value: [117.1835, 29.2671] },
      { value: [113.8595, 27.6231] },
      { value: [114.9295, 27.8196] },
      { value: [114.9328, 25.8431] },
      { value: [114.3953, 27.8105] },
      { value: [117.9235, 28.4453] },
      { value: [114.9948, 27.1162] },
      { value: [116.3799, 27.9498] },
    ]
    this.initMap();
  },
  methods: {
    initMap() {
      // 注册地图
      echarts.registerMap("jiangxi", jiangxiMap);

      // 初始化图表
      this.myChart = echarts.init(this.$refs.chart);

      // 地图配置
      const option = {
        title: {
          text: "全国用户分布图", // 标题文本
          subtext: '根据最后登录位置进行统计',
          left: "center", // 标题位置，水平居中
          textStyle: {
            color: "#333", // 标题文字颜色
            fontSize: 20, // 标题文字大小
            fontWeight: "bold", // 标题文字粗细
          },
        },
        series: [
          {
            name: '全国用户分布图',
            type: "effectScatter",
            coordinateSystem: "geo", // 使用地理坐标系
            roam: false, // 允许缩放和平移
            data: this.cityData,
            symbolSize: 1, // 将标记大小设置为 6（更小）
            label: {
              show: false,
              formatter: "{b}", // 显示城市名称
              color: "#fff", // 标签文字颜色（白色）
              fontSize: 12, // 标签文字大小
            },
            itemStyle: {
              color: "#000", // 将标记颜色设置为黑色
              borderColor: "#fff", // 标记边框颜色（黑色）
              borderWidth: 0, // 标记边框宽度
            },
            rippleEffect: {
              brushType: "stroke", // 波纹的绘制方式
              scale: 30, // 波纹的缩放比例
              color: "#164ff1", // 波纹的颜色
              period: 4, // 波纹的动画周期
            },
            showEffectOn: "render", // 在渲染完成后显示波纹效果
          },
        ],
        geo: {
          map: "jiangxi",
          roam: false, // 允许缩放和平移
          label: {
            show: false,
            color: "#fff",
          },
          itemStyle: {
            areaColor: "#e0f3f8",
            borderColor: "#409eff",
            borderWidth: 1,
          },
          emphasis: {
            label: {
              show: true,
              color: "#000", // 高亮时的文字颜色（黑色）
              fontSize: 12, // 高亮时的文字大小
            },
            itemStyle: {
              areaColor: "#888", // 高亮时的区域颜色（灰色）
              borderColor: "#fff", // 高亮时的边框颜色
              borderWidth: 1, // 高亮时的边框宽度
            },
          },
        },
      };

      // 设置地图配置
      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 600px;
}
</style>